<template>
    <div class="newCar">
        <div class="banner">
            <img src="../../assets/新车/banner.png" alt="">
        </div>
        <div class="nav">
            <div class="item">
                <div class="top">
                    <div v-for="item in nav" :key="item.id">
                        <img :src="item.src" alt="">
                    </div>
                </div>
                <div class="bottom">
                    <div v-for="item in nav" :key="item.id">
                        <span>{{ item.text }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="shop">
            <div class="one">
                <div v-for="item in one" :key="item.id">
                    <span>{{ item.text }}</span>
                </div>
            </div>
            <div class="two">
                <div v-for="item in two" :key="item.id">
                    <span>{{ item.text }}</span>
                </div>
            </div>
            <div class="brands">
                <div class="img">
                    <div v-for="item in brands" :key="item.id">
                        <img :src="item.src" alt=""><br>
                        <span>{{ item.text}}</span>
                    </div>
                </div>
            </div>
            <div class="car">
                <div class="cars">
                    <div v-for="item in cars" :key="item.id">
                        <img :src="item.src" alt="">
                    </div>
                </div>
                <div class="text">
                    <div v-for="item in cars" :key="item.id">
                        <span>{{ item.text }}</span>
                    </div>
                </div>
            </div>
            <div class="looked">
                <span>看过</span>
                <div class="bor" v-for="item in looked" :key="item.id">
                    <img :src="item.src" alt="">
                    <span>{{ item.text }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    setup () {
        let nav = [
            {
                id:1,
                src:require('../../assets/新车/导航1.png'),
                text:'销量排行'
            },
            {
                id:2,
                src:require('../../assets/新车/导航2.png'),
                text:'上市新车'
            },
            {
                id:3,
                src:require('../../assets/新车/导航3.png'),
                text:'条件选车'
            },
            {
                id:4,
                src:require('../../assets/新车/导航4.png'),
                text:'购车季'
            },
            {
                id:5,
                src:require('../../assets/新车/导航5.png'),
                text:'查成交价'
            },
            {
                id:6,
                src:require('../../assets/新车/导航6.png'),
                text:'新车特卖'
            }
        ]
        let one = [
            {
                id:1,
                text:'10万以下'
            },
            {
                id:2,
                text:'10-15万'
            },
            {
                id:3,
                text:'15-20万'
            },
            {
                id:4,
                text:'20-30万'
            }
        ]
        let two = [
            {
                id:1,
                text:'轿车'
            },
            {
                id:2,
                text:'SUV'
            },
            {
                id:3,
                text:'新能源'
            },
            {
                id:4,
                text:'更多'
            }
        ]
        let brands = [
            {
                id:1,
                src:require('../../assets/新车/品牌1.png'),
                text:'本田'
            },
            {
                id:2,
                src:require('../../assets/新车/品牌2.png'),
                text:'丰田'
            },
            {
                id:3,
                src:require('../../assets/新车/品牌3.png'),
                text:'日产'
            },
            {
                id:4,
                src:require('../../assets/新车/品牌4.png'),
                text:'宝马'
            },
            {
                id:5,
                src:require('../../assets/新车/品牌5.png'),
                text:'大众'
            }
        ]
        let cars = [
            {
                id:1,
                src:require('../../assets/新车/车1.png'),
                text:'朗逸'
            },
            {
                id:2,
                src:require('../../assets/新车/车2.png'),
                text:'飞凡R7'
            },
            {
                id:3,
                src:require('../../assets/新车/车3.png'),
                text:'明锐'
            }
        ]
        let looked = [
            {
                id:1,
                src:require('../../assets/新车/林肯Z.png'),
                text:'林肯Z'
            },
            {
                id:2,
                src:require('../../assets/新车/凯迪拉克CT5.png'),
                text:'凯迪拉克CT5'
            },
            {
                id:3,
                src:require('../../assets/新车/Polestar 2.png'),
                text:'Polestar 2'
            }
        ]
        return {
            nav,
            one,
            two,
            brands,
            cars,
            looked
        }
    }
})
</script>

<style scoped>
.newCar{
    width: 95%;
    height: 100%;
    background-color: #F6F7FB;
    padding: 18px;
}
.newCar .banner{
    width: 100%;
}
.newCar .banner img{
    width: 100%;
    height:300px;
    margin: auto;
}
.newCar .nav .item .top,.newCar .nav .item .bottom{
    display:flex;
    justify-content:space-evenly;
}
.newCar .nav .item .top img{
    width: 70px;
    height: 70px;
}
.newCar .nav .item .bottom{
    font-size:20px;
    margin: 20px 0;
}
.newCar .shop{
    width: 100%;
    margin: auto;
    background-color: white;
    padding-top: 6px;
    border-radius: 10px;
}
.newCar .shop .one,.newCar .shop .two{
    display: flex;
    justify-content: space-evenly;
    margin-top: 18px;
}
.newCar .shop .one div,.newCar .shop .two div{
    background-color: #F6F7FB;
    width:22%;
    line-height:60px;
    border-radius: 10px;
    text-align: center;
    font-size:20px;
}
.newCar .shop .brands .img,.newCar .shop .car .cars,.newCar .shop .car .text{
    display:flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 18px;
}
.newCar .shop .brands .img img{
    width: 60px;
    height: 60px;
}
.newCar .shop .brands .img span,.newCar .shop .car .text span{
    font-size: 20px;
    text-align: center;
}
.newCar .shop .car .cars img{
    width: 170px;
    height: 100px;
}
.newCar .shop .car .text span{
    display: inline-block;
    width: 200px;
}
.newCar .shop .looked{
    display: flex;
    font-size:20px;
    padding: 0 10px;
    justify-content: space-evenly;
}
.newCar .shop .looked .bor{
    background-color: #F5F6F6;
    margin: 0 20px;
}
.newCar .shop .looked .bor img{
    width: 30px;
    height: 40px;
}
.newCar .shop .looked .bor span{
    font-size:20px;
}
</style>